<template>
  <div style="padding:15px;">
    <vxe-toolbar id="toolbarId" :setting="{storage: true}" export :refresh="{query: findList}">
      <template v-slot:buttons>
        <el-button @click="findList">查询</el-button>
        <el-button @click="funcAdd">新增</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      show-footer
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      show-header-overflow
      show-overflow
      row-id="id"
      :loading="loading"
      class="mytable-footer"
      height="700"
      :data="tableData"
      remote-sort
      @sort-change="sortList"
    >
      <vxe-table-column>
        <vxe-table-column field="name" title="名称" min-width="200" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.name" placeholder="名称" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="type" title="App类型" min-width="100" sortable>
          <template v-slot="{row}">{{ typeMap[row.type] }}</template>
        </vxe-table-column>
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.type" clearable placeholder="App类型">
            <el-option v-for="(v,k) in typeMap" :key="k" :label="v" :value="k" />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="size" title="App大小" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.size" placeholder="App大小" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="version" title="App版本" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.version" placeholder="App版本" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="openUpdate" title="自动更新" min-width="100" sortable>
          <template v-slot="{row}">{{ updateMap[row.openUpdate] }}</template>
        </vxe-table-column>
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.openUpdate" clearable placeholder="自动更新">
            <el-option v-for="(v,k) in updateMap" :key="k" :label="v" :value="k" />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="forceUpdate" title="强制更新" min-width="100" sortable>
          <template v-slot="{row}">{{ updateMap[row.forceUpdate] }}</template>
        </vxe-table-column>
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.forceUpdate" clearable placeholder="强制更新">
            <el-option v-for="(v,k) in updateMap" :key="k" :label="v" :value="k" />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="content" title="更新内容" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.content" placeholder="更新内容" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="qrCode" title="二维码" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.qrCode" placeholder="二维码" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="link" title="下载链接" min-width="100" sortable />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.link" placeholder="下载链接" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" min-width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="详情" placement="top">
            <vxe-button type="text" @click="funcDetail(scope.row.id)">
              <i class="el-icon-document" />
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <vxe-button type="text" @click="funcEdit(scope.row.id)">
              <i class="el-icon-edit" />
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <vxe-button type="text" @click="funcDelete(scope.row.id)">
              <i class="el-icon-delete" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />

    <vxe-modal v-model="modelAddFlag" title="新增" width="860" height="600" resize>
      <compAdd ref="addRef" @fatherAddMethod="fatherAdd" @fatherCancelMethod="fatherCancel" />
    </vxe-modal>
    <vxe-modal v-model="modelEditFlag" title="编辑" width="860" height="600" resize>
      <compEdit ref="editRef" @fatherEditMethod="fatherEdit" @fatherCancelMethod="fatherCancel" />
    </vxe-modal>
    <vxe-modal v-model="modelDetailFlag" title="详情" width="860" height="600" resize>
      <compDetail ref="detailRef" />
    </vxe-modal>
  </div>
</template>
<script>
  import Vue from "vue";
  import "xe-utils";
  import VXETable from "vxe-table";
  import "vxe-table/lib/index.css";
  import XEUtils from "xe-utils";
  import VXEUtils from "vxe-utils";
  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
  import compAdd from "./components/partyGroupConfigAdd.vue";
  import compEdit from "./components/partyGroupConfigEdit.vue";
  import compDetail from "./components/partyGroupConfigDetail.vue";
  import { AppUpload } from "@/api/statistics";
  import request from "@/utils/request";
  export default {
    name: "partyGroupConfigList",
    components: {
      compAdd,
      compEdit,
      compDetail
    },
    data() {
      return {
        message: "",
        modelAddFlag: false,
        modelEditFlag: false,
        modelDetailFlag: false,
        loading: false,
        tableData: [],
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          sortField: "",
          sortType: "",
          total: 0
        },
        typeMap: {"tmsDriver":"司机端","tmsShipper":"入驻商端" },
        updateMap: {0:"关闭",1:"开启" }
      };
    },
    created() {
      this.findList();
    },
    methods: {
      findList() {
        this.loading = true;
        return new Promise(resolve => {
          AppUpload(this.listQuery).then(response => {
            this.tableData = response.data.records;
            this.loading = false;
            resolve();
          });
        });
      },
      // 排序
      sortList({ column, property, order }) {
        if (order) {
          this.listQuery.sortField = property;
          this.listQuery.sortType = order;
        } else {
          this.listQuery.sortField = "";
        }
        this.findList();
      },
      // 添加方法
      funcAdd() {
        this.modelAddFlag = true;
      },
      // 修改方法
      funcEdit(id) {
        this.$refs.editRef.getInfo(id);
        this.modelEditFlag = true;
      },
      // 详情方法
      funcDetail(id) {
        this.$refs.detailRef.getInfo(id);
        this.modelDetailFlag = true;
      },
      // 删除方法
      funcDelete(row) {
        debugger
        this.$confirm("确认删除吗？")
          .then(_ => {
            request({
              url: `/arpa-basic-api/appInfo`,
              method: "delete",
              params: { ids: row }
            }).then(response => {
              this.$message({ message: response.msg, type: "success" });
              this.findList();
            });
          })
          .catch(_ => {});
      },
      // 增加组件的父方法
      fatherAdd() {
        this.modelAddFlag = false;
        this.findList();
      },
      // 编辑组件的父方法
      fatherEdit() {
        this.modelEditFlag = false;
        this.findList();
      },
      // 公共取消
      fatherCancel(modelFlag) {
        switch (modelFlag) {
          case "add":
            this.modelAddFlag = false;
            break;
          case "edit":
            this.modelEditFlag = false;
            break;
          case "detail":
            this.modelDetailFlag = false;
            break;
          default:
        }
      },
      // 分页handle
      handlePageChange({ currentPage, pageSize }) {
        this.listQuery.pageNum = currentPage;
        this.listQuery.pageSize = pageSize;
        this.findList();
      }
    }
  };
</script>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis),
  .vxe-table .vxe-footer--column:not(.col--ellipsis),
  .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }
  .vxe-toolbar {
    padding: 0 0 10px 0;
  }
</style>
